<template>
  <div class="flex flex-col text-sm dark:bg-gray-800">
    <div class="w-full px-6 mx-auto text-gray-800 md:max-w-2xl lg:max-w-3xl md:h-full md:flex md:flex-col dark:text-gray-100">
      <!-- <div class="flex justify-center p-2">
        <img src="/logo.png" class="object-contain w-auto h-20" />
      </div> -->
      <h1 class="text-2xl font-semibold text-center sm:mt-[3vh] ml-auto mr-auto mb-10 sm:mb-16 flex gap-2 items-center justify-center pt-2">{{$t('welcome.title')}}</h1>

      <div class="space-y-2">
        <div class="flex text-sm" v-for="d, i in $t('welcome.desc').split('---')">
          <span class="mr-1">{{i + 1}}.</span>
          {{d}}
        </div>

        <!-- <div class="text-sm">{{$t('welcome.desc1')}}</div>
        <div class="text-sm">{{$t('welcome.desc2')}}</div>
        <div class="text-sm">{{$t('welcome.desc3')}}</div>
        <div class="text-sm">{{$t('welcome.desc4')}}</div>
        <div class="text-sm">{{$t('welcome.desc5')}}</div>
        <div class="text-sm">{{$t('welcome.desc6')}}</div> -->
      </div>

      <div class="p-2 mt-3 text-sm text-center rounded text-slate-500 bg-slate-50">
        {{$t('translationBy')}}
      </div>

      <div class="md:flex items-start text-center gap-3.5 mt-8">
        <div class="flex flex-col mb-8 md:mb-auto gap-3.5 flex-1">
          <h2 class="flex items-center gap-3 m-auto text-lg font-normal md:flex-col md:gap-2"><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24"
              stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
              <circle cx="12" cy="12" r="5"></circle>
              <line x1="12" y1="1" x2="12" y2="3"></line>
              <line x1="12" y1="21" x2="12" y2="23"></line>
              <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
              <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
              <line x1="1" y1="12" x2="3" y2="12"></line>
              <line x1="21" y1="12" x2="23" y2="12"></line>
              <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
              <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
            </svg>{{$t('welcome.examples.title')}}</h2>
          <ul class="flex flex-col gap-3.5 w-full sm:max-w-md m-auto"><button
              class="w-full p-3 rounded-md bg-gray-50 dark:bg-white/5 hover:bg-gray-200 dark:hover:bg-gray-900">"{{$t('welcome.examples.desc1')}}" →</button><button
              class="w-full p-3 rounded-md bg-gray-50 dark:bg-white/5 hover:bg-gray-200 dark:hover:bg-gray-900">"{{$t('welcome.examples.desc2')}}"
              →</button><button class="w-full p-3 rounded-md bg-gray-50 dark:bg-white/5 hover:bg-gray-200 dark:hover:bg-gray-900">"{{$t('welcome.examples.desc3')}}"
              →</button></ul>
        </div>
        <div class="flex flex-col mb-8 md:mb-auto gap-3.5 flex-1">
          <h2 class="flex items-center gap-3 m-auto text-lg font-normal md:flex-col md:gap-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
              stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="w-6 h-6">
              <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"></path>
            </svg>{{$t('welcome.capabilities.title')}}</h2>
          <ul class="flex flex-col gap-3.5 w-full sm:max-w-md m-auto">
            <li class="w-full p-3 rounded-md bg-gray-50 dark:bg-white/5">{{$t('welcome.capabilities.desc1')}}</li>
            <li class="w-full p-3 rounded-md bg-gray-50 dark:bg-white/5">{{$t('welcome.capabilities.desc2')}}</li>
            <li class="w-full p-3 rounded-md bg-gray-50 dark:bg-white/5">{{$t('welcome.capabilities.desc3')}}</li>
          </ul>
        </div>
        <div class="flex flex-col mb-8 md:mb-auto gap-3.5 flex-1">
          <h2 class="flex items-center gap-3 m-auto text-lg font-normal md:flex-col md:gap-2"><svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24"
              stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
              <line x1="12" y1="9" x2="12" y2="13"></line>
              <line x1="12" y1="17" x2="12.01" y2="17"></line>
            </svg>{{$t('welcome.limitations.title')}}</h2>
          <ul class="flex flex-col gap-3.5 w-full sm:max-w-md m-auto">
            <li class="w-full p-3 rounded-md bg-gray-50 dark:bg-white/5">{{$t('welcome.limitations.desc1')}}</li>
            <li class="w-full p-3 rounded-md bg-gray-50 dark:bg-white/5">{{$t('welcome.limitations.desc2')}}</li>
            <li class="w-full p-3 rounded-md bg-gray-50 dark:bg-white/5">{{$t('welcome.limitations.desc3')}}</li>
          </ul>
        </div>
      </div>
    </div>

    <div class="flex-shrink-0 h-32 md:h-4"></div>

  </div>
</template>